<template>
    <div class="y-card-container">
        <div class="y-card-container-header">
            <div class="y-card-container-header-icon"></div>
            <div class="y-card-container-header-title">{{ title }}</div>
        </div>
        <el-row :gutter="20">
            <el-col v-for="card of cards" :key="card.title" :span="span"><y-card v-bind="card"></y-card></el-col>
        </el-row>
    </div>
</template>

<script> 
export default {
    props: {
        title: {
            type: String,
            require: true
        },
        span:{ 
            type:Number,
            default:12
        },
        cards:{
            type:Array,
            default:()=>[]
        }
    }
}
</script>

<style lang="less" scoped>
.y-card-container {
    .y-card-container-header {
        height: 35px;
        display: flex;
        align-items: center;
        .y-card-container-header-icon {
            width: 4px;
            background-color: #409eff;
            height: 18px;
            border-radius: 2px;
            margin-right: 10px;
        } 
        .y-card-container-header-title {
            font-size: 15px;
        }
    }
}
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
</style>
